<template>
	<view class="menuList" :style="{ 'min-height' : height + 'px'}">
		<view class="fixed bottom whiteBg bt" id="menu">
			
			<slot name="top"></slot>
			
			<view class="fixAutoNoPd middle">
				<view :style="{width:list.length*50 + 'px'}">
					<view class="flex av text-center ">
						<block v-for="( item , curIndex) in list" :key="curIndex">
							<button class="item ptb8 grey" open-type="share" v-if="item.isShare">
								<view class="fz18" :class="item.icon"></view>
								<view class="fz12 mt5">{{item.title}}</view>
							</button>
							<view class="item ptb8" @tap="tapItem(curIndex)" :class="{ 'main' : item.isChoosed , 'grey' : !item.isChoosed }" v-else>
								<view class="fz18" :class="item.icon"></view>
								<view class="fz12 mt5">{{item.title}}</view>
							</view>
						</block>
					</view>
				</view>
				<view class="text-center plr10">
					<slot></slot>
				</view>
			</view>
			
			
		</view>
	</view>
	
</template>

<script>
	export default {
		name : 'tabBar' ,
		props:{
			list : {
				type : Array ,
				default : function(e){
					return [
						{icon : 'iconfont icon-tuandui' , title : "合唱团" , url : "/pages/chorusList/chorusList" , isShare : false } ,
						{icon : 'sIcon-collect' , title : "收藏" , url : "" , isShare : false  } ,
						{icon : 'sIcon-shareFill' , title : "分享" , url : "" , isShare : true } 
					] ;
				}
			}
		},
		
		data() {
			return {
				height : 54 
			};
		},
		
		mounted() {
			this.computeHeight();
		},
		
		updated() {
			this.computeHeight();
		},
		
		methods:{
			
			computeHeight:function(e){
				setTimeout(e => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#menu').boundingClientRect(data => {
						if(data){
							this.height = data.height + 15;
						}
					}).exec();
				},500);
			},
			
			tapItem : function(index){
				this.$emit("tapItem" , {index : index});
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.menuList{
		.fixed{
			padding-bottom: constant(safe-area-inset-bottom); 
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 99;
		}
		.fz12{
			line-height: 28upx;
		}
		.ptb8{
			padding-top: 14upx;
			padding-bottom: 14upx;
		}
		.fz18{
			line-height: 40upx;
		}
	}
	
	
</style>
